Hay una diferencia entre añadir una imagen de fondo y añadir una textura. Normalmente para las texturas utilizamos la propiedad repeat para que la imagen se repita y ocupe todo el fondo.
En una plantilla de Blogger la imagen de fondo la añadiríamos de la siguiente forma.body {
background: url('url-imagen-fondo');
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}
Cuando hacemos eso conseguimos que la imagen se repita a lo largo y ancho del blog.
Veamos un ejemplo, añadimos la siguiente imagen que mide 250px × 229px
background: url('url-de-la-imagen');
Por defecto la imagen se repite, y nos proporciona el mismo efecto que si añadiéramos la propiedad repeat.
background: url('url-de-la-imagen')repeat;
La propiedad background-repeat determina como se repite una imagen de fondo.Si utilizamos no-repeat nuestra imagen no se repetirá y por defecto aparecería en el margen superior izquierdo.
background: url('url-de-la-imagen') no-repeat;
Hay otros valores que podemos añadir para decidir de qué forma repetir la imagen.
Si con repeat la imagen se repite horizontal y verticalmente con repeat-x conseguimos que se repita en horizontal.
background: url('url-de-la-imagen')repeat-x;
Por el contrario se repetirá en vertical si utilizamos repeat-y
background: url('url-de-la-imagen') repeat-y;
Como decía antes no se añade igual una textura que una imagen, antes de añadir una imagen de fondo deberíamos saber que la imagen no se posiciona en el centro sino que somos nosotros los que debemos añadir la posición de la imagen. Para posicionar una imagen utilizamos la propiedad background-position.
Se utilizan los valores top (arriba) left (izquierda) right (derecha) bottom (abajo) y center (centrado)
Posiciones horizontales: (left, center, right)
Posiciones horizontales verticales (top, center, bottom)
Partiendo de esa base aquí tenemos unos ejemplos.
¿Todavía nada en claro? quizás con este ejemplo veamos mejor como posicionar una imagen tipo fotografía.
Si nuestra imagen es grande puede que no tengamos problema, pero si por el contrario es menor que el espacio de nuestro blog se vería más o menos así:
background: url('url de la imagen') no-repeat center;
Hay una solución y es aumentar la imagen de tamaño, pero con seguridad que la imagen perdería calidad, podemos probar si así lo deseamos o.. recurrir a otra solución. Añadir color a ese espacio que no es ocupado por la imagen.
background:#000 url('url de la imagen') no-repeat center;
La solución es sencilla veremos la imagen centrada, y ese espacio que no ocupa será ocupado por un color.
Hola Gemita, yo necesitaria que la parte de los creditos al final del blog apareciera con el 100% de ancho, supongo que colocando una imagen de fondo pero como ya tengo una que uso para la cabecera se puede hacer? es como la barra que tienes tu roja al final de tu blog pero que vaya de lado a lado de la pantalla (no siempre visible sino cuando lleguemos a esa parte)
ConectaBlog
Tu blog esta excelente!! Felicidades!!
Muy buen tutorial Gem@, la verdad es que el fondo es una de las cosas más importantes ;)
Saludos :D
Aprovechando que he entrado por el lado de Windows del portátil, aprovecho para saludarte y decirte que me he abierto una cuenta en Twitter, porque, como ya te dije hace un tiempo, me resulta imposible visitar directamente tu blog usando Linux, pero te sigo por correo y, si no te molesta, los comentarios te los hago vía Twitter. ¿Te parece bien?
En cuanto al tema en cuestión, de CSS sé muy poca cosa, no sabía, por ejemplo, que es posible combinar un fondo con una imagen, y tampoco conocía en profundidad los atributos disponibles para posicionar la imagen, así que todo ésto me va a servir de mucha ayuda, en caso de rediseñar alguno de mis blogs.
¡Un saludo, Gem@! ;)
yz Vi el otro comentario y en el blog de Rosa MALINA, no te preocupes :)
yz Gracias Adrián Mendoza :)
yz Me alegra que te guste Jaime ;)
yz José GDF ya te añadí en Twitter, me parece todo lo bien que a ti te parezca, es una buena forma de comunicarse aunque limitada.
De cualquier forma me alegra verte :)
No cielo no me preocupo, es que cuando visité a Rosa y vi que el footer que tenía ella era lo que quería y encima mis columnas las coloqué siguiendo una entrada suya pues pensé que era lo mejor. Si a veces no la digo a ella es porque siempre está full la pobre.
Y justo vine a ti porque justo habia visto la entrada esta de las imagenes de fondo.
Pero si pasa de mi vuelvo, jajajaaaaaaaa
/*lo último es para que lo lea Rosa
Malinaaaaaaaaaaa :D
Gem@ no hay derecho |O fíjate la malamujé viene aquí a cotillear de mi a escondidas.
yz Rosa que Malina lo hizo para que no la mandaras usar el buscador jajajajaja l oque pasa que no se atreve a decirlo :)
yz Malina hay una frase que dice mucho k_nelita "no intentes aclarar que se oscurece" pues eso, déjalo como está o se va a poner más oscuro que una noche de invierno ;)
al punto 1: jajajaja diste en el clavo! que bueno!
sl punto 2: pa' una vez que hablo en serio... :(
Rosa deja de malmeter a Gema de mi, peazo bicho!
Y mira que lo sospeché... "esta es pa ahorrarse el trabajo" y na, ¡qué piqué!:S
@Malina, ¡bixo tu!
Gem@ estás de moda!, ahora no hay nombre sin arroba son unos copiotas estos de twitter.
Ah! y "la Rosa" otra copiota: bixo y malamujé (me lo ha tuneado).
Pero que belleza. Hay que ponerla en práctica, si no de seguro tendré un castigo.
¡Un gran abrazo, Gem@!.
Nos gustaría intercambiar enlaces con ustedes, contáctennos: contacto@creactivityfocus.com.
yz MALINA no me había dado cuenta pero es verdad sólo que tenemos la @ al contario :)
yz Rosa ahora dice que la copias ajajaja
yz Deybi pues a probar se ha dicho :)
yz Tecnología 21 mi mail está en el menú de la cabecera, lo de intercambiar enlaces no comparto esa idea pienso que los enlaces es el autor del blog quien decide que sitios enlazar.
Buenas! Gracias por esta explicación tan sencilla y provechosa! Cada vez que visito tu blog me dan ganas de tunear el mio... (y eso es bastantes veces :D ).
Por cierto, he visto por allí arriba que alguien se queja de que no puede ver tu blog desde Linux... Creo que a mi me pasa lo mismo (y digo creo, porque tampoco me he fijado tanto cuando es que no puedo abrirlo... :P ).
Bueno, te quería hacer una petición (¿tienes algún post donde hacer peticiones? Si está, no lo he visto). El caso es que me gustaría hacer que cuando la gente busque por etiquetas en mi blog, no saliera el cartel ese de "Se muestran todos los posts relacionados con la etiqueta tal". Si no es mucha molestia, podrías explicar como se hace? (si es posible, claro está).
yz Hola Moxi, así es según José GDF con Linux no puede acceder a este blog, al parecer es por el guión de la url :(
Sobre una entrada de peticiones pues no, no tengo nada de eso pero me puedes preguntar lo que quieras en cualquier entrada como ahora.
Lo que buscas puedes verlo en el siguiente enlace ;)
Hola Gema estoy intentando cambiar el blog de álvaro (mi hijo) y quiero ponerlo con transparencias me parecen preciosas, pero me declaro incapaz...ya que siguiendo tus pasos no logro que el fondo se quede quieto y la transparencia sea la que baje y suba...espero que entiendas lo que tan mal te explico ;))
Si puedes echame un cable vale?
Gracias anticipadas.
yz Sib ¿lo estás haciendo en algún blog de pruebas? sería conveniente probar antes.
Otra cosa.. ¿qué color le vas a dar a la transparencia? ya tengo algo en mente que te facilitará la tarea pero depende del color :O
Hola Gema de nuevo, si tengo un blog de pruebas en el que hago de todo sin demasiado éxito de momento... ;))
La idea es un fondo oscuro o acerado algo parecido a lo que pusiste tu en la entrada de las transparencias y un cuerpo más claro para que se lea mejor, pero con movimiento..
De todas formas sabes que me dejo aconsejar por ti encantada...
Un abrazo
hola te quiero felicitar por este buen blog, ya q ayuda a todos los q no saben como crear un blog y me incluyo yo, eh estado buscando por todos lados y no encuentro la solucion para mi pregunta, espero me puedas ayudar.
Mi duda es como puedo hacer para q en la barra de direcciones de cualquier navegador solo aparesca mi URL asi:
http://miblog.com y no http://mibleg.com/algo.html cada ves k la gente va entrando a enlaces diferentes.
osea q se esconda las demas URL de enlaces y solo se mantena mi direccion fija.
Espero alguna respuesta x favorr gracias!!!
yz Sib mándame al correo una copia de la plantillas que deseas añadir para que haga una prueba y ya te contesto por mail para entendernos mejor :)
(No te olvides de mandar la imagen de fondo si no la tuvieras añadida)
yz Anónimo esa url aparece siempre que estés en la página principal pero cada vez que nos desplazamos por otras páginas la url va cambiando y muestra la de la página donde nos encontramos.
Hasta donde yo sé en Blogger no es posible hacer eso que dices :(
Hola Gema, yo again, pero ahora por este otro lado, vi este fondo y me has dado una gran idea, me darias el link de la imagen a ver si ahora q tengo un poco de tiempo puedo personalizar comentarios" con esta hermosa img.
Gracias:)
yz Giovanna cualquier imagen que quieras puedes llevártela no es necesario que pidas permiso, puedes hacerlo situando el ratón sobre la imagen, botón derecho, guardar como... ;)
Hola, pues esta es la primera vez que escribo en este blog pues ya tiene varias veces que lo visito pero no me agradaba el diseño anterior XD
pero quedo mejor, pues gracias por este tuto de como poner fondo, yo tuve que editar todo lo de mi plantilla, mejor dicho borre cosas, pero funciona saludos desde Quintana Roo Mexico
Themasteralex
www.megadesc.blogspot.com
me refiero a que no quede como tu fondo de madera q por cierto es muy lindo...quisiera que quede como en el lugar del fondo blanco que tienes
Ahora creo q me explique mejor
Cariños
Sorry no me quedo completo el post, esta es la primera parte
Gracias Gema, deseo que la imagen quede como pagina principal para todos los efectos pero me preguntaba si sera factible que solo algunas entradas puedan tener un fondo distinto (poner de fondo la imagen que tanto me gusto de tu ejemplo) al de la pagina principal del blog,
De hecho la use en la cabecera del blog y quedo super bien...mirala cuando puedas
yz Saludos Themasteralex me alegra que te funcionara el tema de la imagen de fondo.
El diseño del blog es tarea fácil cuando lo hacemos nosotros mismos, lo complicado es que guste a todo el mundo :)
yz Hola giovanna, quedó muy bien la imagen de fondo :) Para que puedas añadir la imagen sólo en algunas entradas mira aquí
(Voy a ver los otros comentarios tuyos que ayer no me dio tiempo a contestar)
Gracias por este, que bueno q te gusto, ahora que ya tienes ambas vistas, cual crees tu es la mejor apariencia para mi blog, la anterior o la actual (con sinceridad ok, recuerda q es la imagen de entrada para mi negocio).
Cariños
Hola gema como vas
yo aca haciendo los cambios y mejoras: tengo una duda, no encontre el .Post-body{ que mencionas, aca te detallo lo que aparece en mi plantilla:
.date-header
.post
.post-title
.post-title a; .post-title: a visited; .post-title strong{ text decoration:none;
.post div
.post footer
.post footer .span
.post img
.post blockquote
.post blockquote p
y seria no hay mas, no quize tocar nada...
yz Hola Giovanna yo siempre que doy una opinión intento ser lo más clara posible pero hay que tener en cuenta que cada persona tiene sus propios gustos y no coincidir con los de los demás.
La imagen me gusta, sin embargo y siempre teniendo en cuenta que es mi opinión pero debe ser tu decisión porque es tu blog... yo pondría una imagen distinta, una imagen que destaque del contenido del blog, algo que llame la atención pero sin quitarle protagonismo a las entradas que es la pieza importante.
Algo así como un degradado donde el color predominante fuera el color que vas a utilizar para las fuentes del blog.
Y ya que me pides opinión .. utilizaría el mismo color para todas las fuentes, es decir la misma tonalidad.
Sobre ese código que no encuentras prueba con .post div en todas las plantillas no viene definido igual ;)
Gracias por tus ideas, pense q para fondo del blog seria muy de barby por eso mi idea central era dejarlo solo para algunas entradas (novias/mis quince/mujeres o similares y ahora q me das el codigo hare esos cambios) en cuanto a la imagen, he visto tantas, pense hasta en una foto en transparencias pero no se como hacerlo vi tus notas pero no me resultan, el degrade me gustaria bastante si tienes algo en tu baul de herramientas (jajaja) dame el link para intrusear y seguir buscando. las fuentes tienes mucha razon y hoy estuve haciendo coincidir todos los titulos del mismo color y fuente (en las entradas) trate de hacerlo con el resto en la plantilla (siderbar/post/cabecera/y el titulo donde esta el reloj, queria unificar todo con la fuente vivaldi pero no me resulto) a ver si lo estoy haciendo bien
font-style='vivaldi'>
cariños y gracias mil por la ayuda
Muy buenas Gema, el otro dia puse una imagen de fondo de mi blog, pero no guarde el color original en negro del mismo, y ahora quisiera volver al color negro original, pero sin tener que colgar una miagen nega, ¿como lo hago?.
Gracias anticipadas y enhorabuena por tu blog, recuerdos de chico, un colega enamorado de este blog.
yz Hola Giovanna, estuve mirando en mis carpetas algún degradado y si te digo la verdad no me termina de convencer ninguno, pero no te preocupes que lo tengo en cuenta y como suelo ver bastantes páginas de diseño te guardaré alguna que vea apropiada para que tu escojas ;)
Sobre el tipo de fuente vivaldi te cuento...
Para que veas ese tipo de fuente debes tenerlo en tu PC, es decir descargarlo de "algún" sitio y guardarlo en la carpeta de fuentes de tu sistema.
Otro detalle a tener en cuenta es que para visualizar las fuentes deben estar como te decía en nuestro PC esto también va para tus visitas porque de no tenerla no la verían.
Normalmente se añaden tres o cuatro tipos de fuentes para en caso de no tener la primera visualizar la segundo, o la tercera y así sucesivamente.
El sitio donde debemos añadirla es en body. (en los estilos del cuerpo del blog)te lo marco en negrita.
body {
background: url("url imagen de fondo"); no-repeat;
margin: 0;
padding: 0px;
font: x-small Verdana, Arial;
text-align: center;
color: #1B703A;
font-size/* */:/**/small;
font-size: /**/small;
}
Abrazos :)
yz Hola Sergio el color de fondo del blog lo puedes añadir de esta forma.
Busca lo siguiente:
body {
background: url(http://img5.imageshack.us/img5/2416/inkstaintexture20.png)no-repeat bottom right fixed;
y sustitúyelo por
body {
background:#000;
Suerte ;)
Hola Gema, gracias por tus comentarios,
hice todo y agrege la fuente a la plantilla pero me cambio todo el cuerpo, titulos y fecha de los post, tb todo en la columna de la siderbar, trate de agregar de a uno el cod. en los diversos items donde aparecen cod. fuentes y no encontre la solucion (se puede cambiar la fuente de los titulos de las entradas y la sider bar a vivaldi y mantener el cod. fuente actual del cuerpo)
Cariños
Saludos.
Primero darte la enhorabuena por el Blog.
Veras tengo un problema , el fondo de mi blog es una imagen fija subida a un servidor , el problema es que el tamaño de la imagen de fondo varia de un ordenador a otro ¿Habría alguna forma de que la imagen de fondo se auto-adaptase a cualquier proporción de pantalla?
Gracias de antemano.
yz Garrido Barroso no me dices de qué imagen se trata, veo que tienes dos blogs con imagen de fondo.
Intenta dar un ancho de 100% a outer-wrapper y vemos si se soluciona.
yz Hola Giovanna no había visto tu comentario :(
Si deseas cambiar la letra del título de los post y sidebar lo puedes hacer en post-title y sidebar añadiendo:
font-family:Verdana,Tahoma,sans-serif;
Sustituyendo lo que está marcado en negrita por tu fuente ;)
Hola Gema.
Perdona por no contestarte antes, es mi blog de ilustración el que quiero modificar, pero cuando pongo el código que me das , lo que sucede es que mis posts y barras se ponen a los lados de la pantalla , pero la imagen de fondo se sigue viendo cortada.
No sé si lo que pido es imposible.
Gracias de nuevo.
yz Garrido Barroso he probado con distintas resoluciones y no veo tal problema, la imagen se adapta al tamaño de la pantalla :0
Hola Gema. siempre estoy pendiente de tus escritos y no encontré nada que me ayude a resolver esta inquietud ¿ como hago para que una imagen que tengo en el fondo del blog (pagina principal), sea diferente en la siguiente pagina. pero que no sea en forma aleatoria , sino la imagen que uno quiere que salga.gracias querida
yz Hola Solidaridad pueden añadirse dos imágenes de forma que cada vez que carga la página muestra una imagen distinta (eso se llama random) pero puedes escoger la imagen a mostrar según en el puesto que la añades.
http://gemablog-.blogspot.com/2008/09/random-de-imgenes-como-fondo-del-blog.html
Por favor GEMA me puedes explicar un poquito mas , fui a la entrada en mención y no encuentro como tener una imagen de fondo en la pagina principal y otra diferente en la siguiente pagina, pero que no sea en forma de random , sino las imágenes que yo quiero estén ahí y no cambien nunca...explicarme un poquito mas.
yz El random va cambiando conforme se actualiza la página independientemente de la página que estés cambia la imagen, pueden ser cualquier número de imágenes, pero lo que tu quieres no sé como puede hacerse Solidaridad :(
no entiendo muy bien
hay que ponerle:
background: url (url de la imagen)repeat
pero a eso se le coloca con parentesis o que???
yz Hola :)
Se añade tal y como está respetando las comillas, únicamente sustituyes url-de-la-imagen por la url de tu imagen.
background: url('url-de-la-imagen')repeat;
Intento conseguir la url de la imagen con imageshack una web pero nada cual de todos los enlaces es y que debo quitar? gracias
yz mariavillalonblog.blogspot.com puedes conseguir la url también si subes la imagen a una entrada de Blogger luego la guardas en borrador y listo. En Imageshack creo que es donde indica algo así como enlace directo.
Hola Gem@ en donde puedo aumentar el tamaño de la imagen de fondo, sin que se repita la misma. Te lo agradezco de antemano!!!.
Gema tengo un drama, seguí tus indicaciones pero por IE no se ve la imagen por Chrome y mozilla no hay dramas. Que puedo hacer.
Gracias :)
yz hellberto666 la única forma de aumentarla es con un editor de imágenes, desde la plantilla es imposible hacerlo :(
yz Pequitas añade la url directa que sería:
http://sites.google.com/site/fusionpecosa/Home/muchasxxx.JPG ;)
Gema, no me sale, mira esto es lo q tengo y aún así no aparece por IE
body {
background: url('http://sites.google.com/site/fusionpecosa/Home/muchasxxx.JPG')no-repeat;
Gracias Gem@!!! la verdad he intentado varias veces cambiado la imagen en distintos editores, y la imagen se sigue viendo igual (o si acaso, una minima diferencia en el tamaño) en la plantilla. Porque me pasa esto?, de cuanto es al maximo de pixeles que acepta la plantilla en una imgen de fondo, sin que esta modifique imagen y la conserve con su tamaño original al insertarla?
yz Veo que cambiaste de plantilla Pequitas :O
yz hellberto666 que yo sepa no hay tal máximo, lo que yo creo es que tu imagen hace la función de una textura porque al ser pequeña debe repetirse yo probaría quitando las dos primeras líneas que tienes
background:#000000 url(url de la imagen Picasa2.jpg);
background-repeat: repeat;repeat-y;
y añadir:
background:#000000 url('url-de-la-imagen')repeat;
Gema, la cambié por q no se veía por IE y por q la verdad estaba bien desabrida :p volví a la q tenía y no me hice mas rollos.
De todas formas gracias.
hola primera vexs q escribo aki saludos !!!
oies pues molestandote con una duda q me surgio si puedes revisar mi blog de pozodj como puedo hacerle para quitar el margen de la imagen principal o la q tengo en lugar del titulo para q me entiendas ia que quisiera que fuera casi del tamaño del ancho del blog i tmb el margen de las entras que quisiera estubieran mas a la izquierda gracias de antemano por tu ayuda !!!
Hola!!
Yo tengo un problema y creo que me lo podrás solucionar, porque es exactamente lo que tú tienes en tu blog. Yo tenía precisamente un fondo de una madera oscura tipo parket(casi clónica a la tuya-que conste q no me he copiado,ehh-)y lo sé poner de fondo, sí, pero se me pone en todo. Quiero reservar el blanco (como tú) para la parte central, ya que si no tiene buena lectura...
Me podrías ayudar?? Te lo agradecería mil :)
PD: En la textura de mi madera se ve como se corta la imagen y empieza de nuevo.... cómo consigues tú que no t pase?
yz Lo importante es que quede como te gusta Pequitas :)
yz zeluby ¿a qué blog te refieres? veo que tienes dos.
yz Karin Comes Peña si la imagen fuera la misma no sería problema, yo también la tomé "prestada" de alguna parte :)
Para que se vea la parte central de color blanco puedes añadir el color de fondo en outer-wrapper algo así:
#outer-wrapper {
background:#ffffff;
La tengo añadida como tu con repeat para que se repita puede que el color blanco no muestre ese corte de la imagen o también que el dibujo de la madera lo disimule, si quieres probar con esta que yo tengo puedes llevarla tranquilamente :)
hola gem@!! tampoco consigo poner un fondo en http://paraninosconcabeza.blogspot.com... ¿qué piensas que puede ser?
hola gem2! vwngo otra vez de visita... se me ha olvidado cómo dejar en blanco la parte central del blog cuando añades una imagen e fondo... aiss
yz Respondí en el otro comentario lk prueba añadiendo en outer-wrapper el color de fondo.
#outer-wrapper {
background:#fff;
.............
.............
.............
}
hola gema. He visto en algun blog que la imagen de fondo permanece estatica en toda la longitud del post. ¿Sabes como puedo hacerlo?
yz T360R en la siguiente url puedes ver como hacerlo ;)
http://gemablog-.blogspot.com/2007/04/imagen-de-fondo-esttica.html
eres una genia!!!
Muchas gracias por esta recopilación de repeats :D ¡Era justo lo que necesitaba!
Estoy diseñando mi primera plantilla, me refiero a diseñarla por completo. Puede que en el futuro necesite tu ayuda, de momento, podría decirse que acabo de partir y aún no estoy en alta mar... :P
Un saludo, Gem@!
yz Hola Mari, gracias por comentar :)
yz Ah siii ya vi esa plantilla ayer es que voy con retraso en los comentarios :O Espero qu elos enlaces del mail te sean de ayuda ;)
Hola, Gema; he colocado una imagen que me ocupa la cabecera y el crosscol y no estoy segura de si queda bien... te importa echar un vistazo y darme tu opinión? Reduje la foto desde photobucket pero no me va bien, y ésta es la opción que mejor quedaba, pero no sé si agobia un poco al visitante. Gracias! http://tinkertrips.blogspot.com/
Ni caso a lo de antes, ya lo he solucionado (no había cerrado photobucket y no me guardaba los cambios). Gracias!!!
:: Ya decía yo que se veía bien :D
hola gem@: para poner una textura de fondo al blog, tengo un script -bien largo- que ya viene con la textura (de una de las páginas de wallpapers) ¿cómo lo coloco o dónde?
:: No hace falta ningún script para añadir texturas de fondo Lara, simplemente añadiendo la url de a imagen en body es suficiente.
Gemma, eres DIos!
:: Ohh no Larisa!! eso es una gran responsabilidad :)
ahhhh sale blancoel fondo cuando quiero modificarlo!!!
:: ¿Dónde estás probando que lo vea Larisa?
este es mi blog, esta muy sencillo, aun estoy en eso de aprender...
http://miblogdepoesia.blogspot.com
:: Pero ahí no hay imagen de fondo sólo color negro, tendría que verlo con el cambio realizado para decirte donde está el error.
se esta actualizando Sensei, esta pc es tercermundista... jaja
:: Lo llevamos bien entonces, la mía se queda colgada de vez en cuando, está pidiendo a gritos que la formateen :S
Querida Gemma, estoy a años luz de entenderle bien a esto, tendre que desempolvar mis clases de programacion y recordar... pq no jala el fondo!!! estoy entre tus seguidores, y creeme, me encanta tu sitio!!!
:: Si lo que quieres es que la imagen se repita debería ser:
background: url(http://www.fondos10.net/wp-content/uploads/2008/10/mariposa-1280-x-1024-300x240.jpg);
Si quieres que quede centrada y arriba como creo que estás intentando:
background: url('http://www.fondos10.net/wp-content/uploads/2008/10/mariposa-1280-x-1024-300x240.jpg')no-repeat center top;
Hola Gema, tengo un inconveniente con la imagen de fondo en el Explorer, no se puede ver mientras que con firefox y otros si se ve bien. En el explorer hay varias cosas que difieren, los bordes de las entradas y demás detalles como el fondo nuevo. El blog es guidopalmadessa.blogspot.com
Muchas gracias!!! tu blog es de gran ayuda para todos!!
:: El tema de la imagen puedes intentarlo así:
background-image:url("http://3.bp.blogspot.com/_9OVrsNqBOV8/S96Nrdq10PI/AAAAAAAAAhw/xDvt5ojyPy0/s1600/klee_ancient-sound+copia.jpg");
background-position:right top;
background-repeat:repeat;
El de los bordes tiene añadido la propiedad border-radius para que se muestre en distintos navegadores, pero dicha propiedad no la reconoce Explorer, para que se vieran esquinas redondeadas en Explores sería necesario utilizar imágenes o un script :S
Hola!
Como pongo el URL de la imagen? No tengo idea!
Quiero ponerle una imagen de fondo al blog pero no se como.
Saludos
:: María Sosten la imagen puedes subirla a una entrada de Blogger y en el mismo editor copiar la url de la imagen, luego la url que traes copiada la pegas donde dice:
body {
background: url('url-imagen-fondo');
.......
.......
.......
Muchas Gracias Gema! :)
Te quiero preguntar otra cosa, en el html de mi blog puedo poner una tipografía que no venga por defaul en la maquina?
Saludos
:: Hola Maria Sosten esta entrada de Vagabundia es lo que estás buscando :D
http://vagabundia.blogspot.com/2010/05/google-font-api-en-blogger.html
¿Podríamos poner una imagen de fondo diferente solo en la columna central donde aparecerán los post?. Hablo de un bloggger de tres columnas siendo la central la de las entradas.
Quiero hacer esto porque mi blog se ve extraño en resoluciones por debajo de 600x800 pixeles y poniendo la imagen de fondo en la columna central ya se vería mejor.
Llevo todo el día buscando como hacerlo y no doy con la tecla.
:: Puede que si, puede quE no, dependiendo de la plantilla que estés usando.
Algunas contienen una única imagen de fondo, tendría que ver tu blog :S
Es cierto, perdona de nuevo. Este es el link: http://diariodeuntortuguero.blogspot.com/
Ya verás que estoy usando bastantes trucos tuyos aunque no todos los echo a andar.
Muchas gracias por tu ayuda, y enhorabuena por el blog.
:: La parte de los post de tu plantilla está en:
.post-outer:first-child {
border-top: medium none;
padding-top: 0;
}
Para añadir una imagen lo podemos hacer añadiendo en esos estilos background: url('url-imagen-fondo');
.post-outer:first-child {
border-top: medium none;
padding-top: 0;
background: url('url-imagen-fondo');
}
Si la imagenes una textura no tendrás problemas pero si es una imagen tipo fotografía tendrás que adaptarla según tamaño como se indica en la entrada.
Muchas gracias Gema, ya casi está, pero solo se me pone el fondo en el mismo post, a mi me gustaría si fuese posible en toda la columna para que quedase como antes (sin el salto del fondo entre post y post, sino con fondo desde arriba hasta abajo). En toda la columna.
Al hacer el fondo sobre toda la columna seguramente no tenga que quedar dentro del marco del post sino por fuera, eso sería el colofón.
Lo que falta, creo, es saber que parte del código es la de toda esa columna. A ver si me puedes echar una mano.
Mil gracias Gema por tu ayuda.
Un saludo.
:: Ha sido error mío entendí que era para los post :S
Entonces este es el lugar:
.main-inner .column-center-inner, .main-inner .column-left-inner, .main-inner .column-right-inner {
padding: 0 5px;
background: url('url-imagen-fondo');
}
Hola Gema!!
Bueno... me ha interesado mucho esa entrada, pero no he compreendido donde se mete el codigo en que parte del codigo?mi plantilla es la sencilla, y me gustaria aplicar el fondo en todo el blog:) graciaas
:: i like its el fondo para el blog se añade en body (al principio debes tenerlo) ;)
Hola Gem@. Hace tiempo que sigo tu blog pero como hasta ahora no me he puesto en serio a tratar de personalizar un poquito más el mío, no había comentado nunca. Ahora me ha surgido una duda y llevo días buscando la solución pero no la localizo, así que me he decidido a preguntarte directamente.
Quiero poner un fondo en mi blog, pero que la parte central quede como la tienes tú, en blanco. No solo cada una de las entradas, sino toda la parte central. Cambié mi plantilla a mínima para ir siguiendo algunos tutoriales y expicaciones que indicas, y ahora no logro hacer esta modificación. ¿Podrías darme alguna pista? Muchas gracias!
:: Eomoi no veo ningún blog en tu perfil con la plantilla Minima :S
@Gem@
Hola Gem@, perdona el retraso pero no he visto tu comentario hasta hoy (vacaciones!). Es un blog que tengo en privado, lo uso para hacer pruebas.
:: Tranquilo Eomoi no estoy esperando todo ese tiempo :)
Puedes probar con el color oscuro en el body y el blanco en outer-wrapper.
Gem@ y si quiero poner dos fondos diferentes por ejemplo, quiero que uno vaya en la X y el otro quiero que vaya repetido en X y Y?, como se podria hacer eso?. Gracias. :)
:: F. Fletcher esta entrada te será de ayuda:
http://vagabundia.blogspot.com/2011/11/background-los-fondos-y-lo-standard.html
eu no metira vos podes ver mi blog y podes cvomentar y decirle a alguien y tambien darme consejos osea todo lo que pido es una ayudita si podes muchas gracias mi blog es:
miespaciomilugar.blogspot.com
Nota: solo los miembros de este blog pueden publicar comentarios.